<template>
  <div id="blog">
    <HeaderItem></HeaderItem>
    <TitleItem :title="title" :title2="title1"></TitleItem>
    <div class="bigbox">
      <div class="big">
        <div class="leftbox">
          <div class="fast">
            <img src="../assets/images/hangkong1.png" alt="" class="fastimg" />
            <div class="fastbot">
              <p class="fasttime">23 2015月， >/ 按管理员</p>
              <p class="fasttit">最快的运输服务</p>
              <p class="fasttext">
                Lorem ipsum dolor sit amet,consectetuer adipiscing elit, sed
                diam nonummy nibh eulsmod tincldunt iut laoreetdolore magna
                aliquam erat volutpat.Ut wisi enim ad minim veniam,quis nostrud
                exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea
                commodo consequat
              </p>
              <button class="fastbut">继续阅读→</button>
            </div>
          </div>
          <div class="world">
            <div class="worldson" v-for="(item, i) in worldlist" :key="i">
              <div class="fast">
                <img
                  src="../assets/images/hangkong1.png"
                  alt=""
                  class="fastimg"
                />
                <div class="fastbot">
                  <p class="fasttime">{{ item.time }}</p>
                  <p class="fasttit">{{ item.tit }}</p>
                  <p class="fasttext">
                    {{ item.text }}
                  </p>
                  <button class="fastbut">继续阅读→</button>
                </div>
              </div>
            </div>
          </div>
          <div class="fenye">
            <el-pagination background layout="prev, pager, next" :total="60" />
          </div>
        </div>
        <!-- 右侧盒子 -->
        <div class="rightbox">
          <div class="rightinput">
            <input type="text" placeholder="搜索" style="border: none" />
            <div class="search">
              <img src="../assets/images/search.png" alt="" class="searchimg" />
            </div>
          </div>
          <div class="option">
            <div class="optiontitbox">
              <p class="optiontit1" @click="activeTab = 'tab1'">最近的帖子</p>
              <p class="optiontit2" @click="activeTab = 'tab2'">阅读次数最多</p>
            </div>
            <div class="posts1" v-show="activeTab === 'tab1'">
              <img src="../assets/page/blog_list_03.png" alt="" style="width: 20%; height: 10%;margin-top: 20px;margin-right: 20px;" />
              <div>
                <p style="color: #747B80;">通过潜在的变革催化剂无缝地实现白板资源最大化渠道。</p>
                <p style="color: #CDCDD1;">23 2015月，/按管理员</p>
              </div>
            </div>
            <div class="posts1" v-show="activeTab === 'tab1'">
              <img src="../assets/page/blog_list_03.png" alt="" style="width: 20%; height: 10%;margin-top: 20px;margin-right: 20px;" />
              <div>
                <p style="color: #747B80;">通过潜在的变革催化剂无缝地实现白板资源最大化渠道。</p>
                <p style="color: #CDCDD1;">23 2015月，/按管理员</p>
              </div>
            </div>
            <div class="posts2" v-show="activeTab === 'tab2'">456</div>
          </div>
          <div class="cate">
            <p class="catetit">博客类别</p>
            <ul>
              <li>灵感</li>
              <li>生活方式</li>
              <li>我的活动</li>
              <li>旅行</li>
              <li>科技</li>
              <li>教育</li>
              <li>未分类</li> 
            </ul>
          </div>
          <div class="cate">
            <p class="catetit">存档</p>
            <ul>
              <li>2014年《》月(3)</li>
              <li>2014年《》月(1)</li>
              <li>2012年《》月(5)</li>
              <li>2012年《》月(3)</li>
              <li>2011年《》月(2)</li>
              <li>2010年《》月(2)</li>
            </ul>
          </div>
          <div class="sign">
            <p class="signtit">标记云</p>
            <div class="signcent">
              <div class="signone">
                习惯
              </div>
              <div class="signone">
                图形
              </div>
            </div>
          </div>
          <div class="sum">
            <img src="../assets/imagesfd/twitter.png" alt="" style="width: 10%;height: 10%;">
            推特提要
          </div>
          <div class="photo">
            <p class="phototit">闪烁照片</p>
            <div class="photobox">
              <img src="../assets/page/toux.png" alt="" style="width: 30%;">
              <img src="../assets/page/toux.png" alt="" style="width: 30%;">
              <img src="../assets/page/toux.png" alt="" style="width: 30%;">
              <img src="../assets/page/toux.png" alt="" style="width: 30%;">
              <img src="../assets/page/toux.png" alt="" style="width: 30%;">
              <img src="../assets/page/toux.png" alt="" style="width: 30%;">
            </div>
          </div>
        </div>
        <!-- 右侧盒子 -->
      </div>
    </div>
    <FooterItem></FooterItem>
  </div>
</template>

<script>
import HeaderItem from "../components/HeaderItem.vue";
import FooterItem from "../components/FooterItem.vue";
import TitleItem from "../components/TitleItem.vue";
export default {
  components: {
    HeaderItem,
    FooterItem,
    TitleItem,
  },
  data() {
    return {
      title: "博客",
      title1: "家/博客",
      activeTab: "tab1",
      worldlist: [
        {
          time: "23 2015月， >/ 按管理员",
          tit: "运往世界各地",
          text: " 积极为以目标为导向的信息中介创建长期高影响力的内容。 使用高效场景动态定制高效涡流.",
        },
        {
          time: "23 2015月， >/ 按管理员",
          tit: "协同并行",
          text: " 积极为以目标为导向的信息中介创建长期高影响力的内容。 使用高效场景动态定制高效涡流.",
        },
        {
          time: "23 2015月， >/ 按管理员",
          tit: "最大的集装箱",
          text: " 积极为以目标为导向的信息中介创建长期高影响力的内容。 使用高效场景动态定制高效涡流.",
        },
        {
          time: "23 2015月， >/ 按管理员",
          tit: "最先进的运输",
          text: " 积极为以目标为导向的信息中介创建长期高影响力的内容。 使用高效场景动态定制高效涡流.",
        },
      ],
    };
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.bigbox {
  width: 100%;
  background-color: #f7f7f7;
}
.big {
  width: 65%;
  margin: auto;
  padding-top: 100px;
  padding-bottom: 150px;
  display: flex;
  justify-content: space-between;
}
/* 左侧盒子 */
.leftbox {
  width: 74%;
}
.fastbot {
  padding: 40px 50px;
  box-sizing: border-box;
  background-color: white;
}
.fastimg {
  width: 100%;
}
.fasttime {
  color: #bfc4c3;
}
.fasttit {
  font-size: 35px;
  font-weight: bold;
  margin-bottom: 20px;
  margin-top: 20px;
}
.fasttext {
  color: #949399;
  line-height: 30px;
}
.fastbut {
  margin-top: 36px;
  color: white;
  background-color: #148ce3;
  padding: 10px 18px;
  border: none;
  border-radius: 20px;
}

.world {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.worldson {
  margin-top: 26px;
  width: 46%;
}
.fenye {
  margin-top: 26px;
  display: flex;
  justify-content: right;
}
/* 左侧盒子 */
/* 右侧盒子 */
.rightbox {
  width: 22%;
}
.rightinput {
  display: flex;
}
.search {
  width: 10%;
  height: 10%;
  background-color: #1c89dc;
}
.searchimg {
  width: 100%;
  height: 100%;
}
.option {
  width: 100%;
  margin-top: 40px;
}
.optiontitbox {
  display: flex;
  padding-bottom: 20px;
  border-bottom: solid 4px white;
}
.optiontit1 {
  margin-right: 20px;
  position: relative;
  cursor: pointer;
}
.optiontit1::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;
  border-bottom: solid #4485ae 4px;
}
.optiontit2 {
  margin-right: 20px;
  position: relative;
  cursor: pointer;
}
.optiontit2::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;
  border-bottom: solid #4485ae 4px;
}
.posts1{
  display: flex;
  margin-top: 20px;
}
.catetit{
  margin: 56px 0 36px 0;
}
.cate>ul>li{
  margin-bottom: 30px;
}
.sign{
  margin-top: 30px;
}
.signcent{
  display: flex;
}
.signone{
  margin-top: 30px;
  padding: 5px 10px;
  background-color: white;
  margin-right: 20px;
  border-radius: 20px;
}
.sum{
  margin-top: 50px;
}
.phototit{
  margin-top: 45px;
  margin-bottom: 28px;
}
.photobox{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.photobox>img{
  margin: 2px;
}
/* 右侧盒子 */


/* 响应1024px */
@media screen and (max-width:1024px) {
    .big{
      width: 100%;
      display: block;
    }
    .leftbox{
      width: 100%;
    }
    .rightbox{
      width: 100%;
    }
    .rightinput{
      display: flex;
      justify-content: center;
      margin-top: 50px;
      width: 100%;
    }
}
/* 响应768px */
@media screen and (max-width:1024px) {
  .world{
    display: block;
  }
  .worldson{
    width: 100%;
  }
}
</style>